<template>
    <view class="containerDocu">
        <view class="warper">
            <u-search placeholder="请输入关键字" v-model="searchValue" :height="40" bgColor="#fff" borderColor="#f2f2f2"
                @search="onSearch" @custom="onSearch"></u-search>
            <scroll-view :scroll-y="true" class="cardWrap" @scrolltolower="onScrollToLower">
                <!-- 组件 -->
                <view v-if="planList.length">
                    <view class="fileItem" v-for="item in planList" :key="item.id" @click="onGoDetaile(item)">
                        <view class="center">
                            <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/pdfIcon.svg"
                                :style="{ width: '80rpx', height: '80rpx' }" />
                            <view class="contentStyle">
                                <view class="title oneWrap">{{ item.name}}</view>
                                <view class="subTitle">
                                    <text>{{item.insertDate?item.insertDate.split(" ")[0]:"" }}</text>
                                    <text style="margin: 0 44rpx">{{ item.downloadNum }}下载</text>
                                    <text>{{item.pageCount||0}}页</text>
                                </view>
                            </view>
                        </view>

                    </view>
                    <u-loadmore :status="loadStatus" @loadmore="onLoadmore" />
                </view>
                <view v-else style="margin-top: 20%">
                    <u-empty text="暂无数据" mode="list"></u-empty>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
// import moment from "moment";
import { docContentList } from "../services/DataDocumentService"
export default {
    data() {
        return {
            searchValue: "", //搜索的值
            safeAreaInsets: {},
            planList: [],
            //加载前值为loadmore，加载中为loading，没有数据为nomore
            loadStatus: 'loadmore',
            // 文档信息
            docInfo: {},
            // 查询
            queryData: {
                pageNo: 1,
                pageSize: 10,
                name: "",
                labelId: "",
            },
        }
    },
    onLoad(option) {
        // console.log(decodeURIComponent(option.info))
        // const info = JSON.parse(decodeURIComponent(option.info)) || {};
        // // console.log(info,"--")
        // this.docInfo = info;
        // this.queryData = { ...this.queryData, labelId: info.labelId }
    },
    onShow() {
        this.queryData = { ...this.queryData }
        // console.log(this.docInfo,"---64")
        // if(this.docInfo&&Object.keys(this.docInfo).length){
            // this.queryData = { ...this.queryData, labelId: this.docInfo.labelId }
        // }
    },
    computed: {},
    methods: {
        //加载更多触发
        onLoadmore() {
            console.log("onLoadmore")
            // this.planList = [...this.planList, ...[2, 3, 4]]
            this.queryData = {
                ...this.queryData,
                pageNo: this.queryData.pageNo + 1
            }
        },
        onScrollToLower(e) {
            if (this.loadStatus === 'loadmore') {
                this.queryData = {
                    ...this.queryData,
                    pageNo: this.queryData.pageNo + 1
                }
            }
        },
        // 去详情页
        onGoDetaile(record) {
            uni.navigateTo({
                url: `/dataDocument/showFileDetailDoc?info=${encodeURIComponent(JSON.stringify(record))}`
            })
        },
        // 获取数据      
        onGetListData(queryData) {
            this.loadStatus = 'loading'
            docContentList(queryData).then(res => {
                let newListData = queryData.pageNo === 1 ? [...res.datas] : [...this.planList, ...res.datas]
                // console.log(newListData)
                if (newListData.length >= res.totalCount) {
                    this.loadStatus = 'noMore'
                } else {
                    this.loadStatus = 'loadmore'
                }
                console.log(newListData,"---98")
                this.planList = newListData
            }).catch(err => {
                this.loadStatus = 'loadmore'
            })
        },
        // 搜索
        onSearch() {
            this.queryData = {
                ...this.queryData,
                name: this.searchValue,
                pageNo: 1
            }
        },
    },
    beforeMount() {

        uni.getSystemInfo({
            success: (res) => {
                // console.log(res, "--26")
                this.windowWidth = res.windowWidth
                this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })

    },
    watch: {
        queryData: {
            handler: function (newData, oldData) {
                // if (newData?.labelId) {
                    this.onGetListData(newData)
                // }
            },
            deep: true
        }
    },


}
</script>

<style lang="scss">
page {
    background: #ffffff !important;
}

.containerDocu {
    padding: 30rpx;
    /* height: 100vh; */
    width: 100vw;
    box-sizing: border-box;

    .warper {
        width: 100%;
        height: 100%;
        margin-top: 32rpx;

        .cardWrap {
            height: calc(100vh - 208rpx);
            margin-top: 32rpx;

            .fileItem {
                height: 128rpx;
                border-radius: 24rpx;
                background-color: #F9F9F9;
                display: flex;
                align-items: center;
                justify-items: center;
                padding: 30rpx 34rpx;
                box-sizing: border-box;
                margin-bottom: 32rpx;

                .contentStyle {
                    margin-left: 28rpx;
                    display: flex;
                    width: 500rpx;
                    flex-direction: column;

                    .title {
                        font-size: 32rpx;
                        margin-bottom: 5rpx;
                    }

                    .subTitle {
                        font-size: 24rpx;
                        color: #999999
                    }
                }
            }
        }
    }
}
</style>